<template>
	<view class="orderdetial">
		<headertop title="申请售后" str1="oridei" :back1="back1"></headertop>
		<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11620@2x.png" class="orderdetialback" mode=""></image>
		<view class="centerbox">
			<view class="zttext">
				<view class="t1">
					申请售后
				</view>
				<view class="t2">
					请您详细填写原因，以便我们快速为您处理。
				</view>
			</view>
			<view class="spbox" v-for="item in  contentobj['items']" :key="item.id" v-if="typestr!='shouhou'">
				<image
					:src="item.bool?'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11469@2x (1).png':'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Ellipse 2226@2x.png'"
					class="xz" mode="" @click="item.bool=!item.bool"></image>
				<image :src="item['goods_image']" class="leftimg" mode=""></image>

				<view class="texts">
					<view class="t1">
						{{item.goods_title}}
					</view>
					<view class="t2">
						{{item.goods_subtitle}}
					</view>
					<view class="t3line">
						<view class="box1">
							<span v-if="skufun(item.goods_sku_text).length>1"><span
									style="font-size: 24rpx;color: #7F7F7F;">{{skufun(item.goods_sku_text)[0]}} |
									{{skufun(item.goods_sku_text)[1]}}</span></span>
							<span v-else><span
									style="font-size: 24rpx;color: #7F7F7F;">{{skufun(item.goods_sku_text)[0]}}</span></span>
						</view>
						<view class="box1">
							x{{item.goods_num}}
						</view>
					</view>
				</view>
			</view>
			<view class="spbox" v-if="typestr=='shouhou'">
				<image
					:src="contentobj.bool?'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11469@2x (1).png':'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Ellipse 2226@2x.png'"
					class="xz" mode="" @click="contentobj.bool=!contentobj.bool"></image>
				<image :src="contentobj['goods_image']" class="leftimg" mode=""></image>

				<view class="texts">
					<view class="t1">
						{{contentobj.goods_title}}
					</view>
					<view class="t2">
						{{contentobj.goods_subtitle}}
					</view>
					<view class="t3line">
						<view class="box1">
							<span v-if="skufun(contentobj.goods_sku_text).length>1"><span
									style="font-size: 24rpx;color: #7F7F7F;">{{skufun(contentobj.goods_sku_text)[0]}} |
									{{skufun(contentobj.goods_sku_text)[1]}}</span></span>
							<span v-else><span
									style="font-size: 24rpx;color: #7F7F7F;">{{skufun(contentobj.goods_sku_text)[0]}}</span></span>
						</view>
						<view class="box1">
							x{{contentobj.goods_num}}
						</view>
					</view>
				</view>
			</view>
			<view class="jigemx">
				<view class="center">
					<view class="t1">
						退款信息
					</view>
					<view class="line1">
						<view class="tt">
							<span style="color:#F53F3F;">*</span>退款类型：
						</view>
						<view class="tt">
							<span>{{typetext(query.type)}}</span>
							<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/wxFrame@2x.png" class="arroright" mode=""
								@click="show=true"></image>
						</view>
					</view>
					<view class="line1">
						<view class="tt">
							退款金额：
						</view>
						<view class="tt" v-if="typestr!='shouhou'">
							￥{{contentobj.order_amount}}
						</view>
						<view class="tt" v-if="typestr=='shouhou'">
							￥{{contentobj.goods_price}}
						</view>
					</view>
					<view class="line2">
						<view class="tt">
							<span style="color:#F53F3F;">*</span>退货原因：
						</view>
						<view class="textsbox">
							<textarea v-model="query.reason" placeholder="请输入退货原因" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm" keyName="label"></up-picker>
		<view class="fixed">
			<view class="fixedbtn" @click="tk">
				申请售后
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		orderdetail,
		applyRefund,
		saohexiao,
		orderdetail1
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import headertop from '@/components/header.vue'
	const back1 = ref('')
	const query = reactive({
		order_id: '',
		reason: '',
		type: '',
		order_item_id: ''
	})
	const columns = reactive([
		[{
				label: '仅退款',
				id: 'refund'
			},
			{
				label: '退换货',
				id: 'return'
			},
			{
				label: '其他',
				id: 'other'
			}
		]
	])
	const contentobj = ref({})
	const content = ref({})
	const show = ref(false)
	const typestr = ref('')
	onLoad((opt) => {
		query.order_id = opt.id
		typestr.value = opt.typestr
		init(opt.id)
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}

	})

	function typetext(str) {
		if (!str) return ''
		if (str == 'refund') return '仅退款'
		if (str == 'return') return '退换货'
		if (str == 'other') return '其他'
	}

	function skufun(str) {
		if (!str) {
			return []
		}
		return str.split(',')
	}

	async function init(id) {
		if (typestr.value == 'shouhou') {
			const res1 = await orderdetail1({
				id
			})
			if (res1.code == 1) {
				contentobj.value = res1.data
				contentobj.value['bool'] = true
			}
			return
		}
		const res = await orderdetail({
			id
		})
		if (res.code == 1) {
			contentobj.value = res.data
			for (var i in contentobj.value.items) {
				if (contentobj.value.items.length == 1) {
					contentobj.value.items[i]['bool'] = true
				} else {
					contentobj.value.items[i]['bool'] = false
				}
			}
		}
	}

	function tk() {
		if (!query.type) {
			uni.showToast({
				title: '请选择退货类型',
				icon: 'none'
			})
			return
		}
		if (!query.reason) {
			uni.showToast({
				title: '退货原因不能为空',
				icon: 'none'
			})
			return
		}
		if (!content.value) {
			uni.showToast({
				title: '退货原因不能为空',
				icon: 'none'
			})
			return
		}
		if (typestr.value != 'shouhou') {
			var arr = contentobj.value.items.filter(item => item.bool == true)

			if (!arr.length) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				})
				return
			}
			var ids = arr.map(item => item.id)
			let uniqueArr = [...new Set(ids)];
			query.order_item_id = uniqueArr.join()
		} else {
			if (!contentobj.value['bool']) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				})
				return
			}
			query.order_item_id = contentobj.value['order_item_id']
			query.order_id = contentobj.value['order_id']
		}


		if (!content.value) {
			uni.showToast({
				title: '退货原因不能为空',
				icon: 'none'
			})
			return
		}
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要申请售后吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					tuihuo()
					// 执行确定后的逻辑
				} else if (res.cancel) {
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {
				console.error('弹窗调用失败', err);
			}
		});
	}

	function cancel() {
		show.value = false
	}

	function confirm(e) {
		query.type = e.value[0]['id']
		show.value = false
	}
	async function tuihuo() {
		const res = await applyRefund(query)
		if (res.code == 1) {
			uni.navigateBack()
			setTimeout(() => {
				uni.showToast({
					title: '申请成功',
					icon: 'none'
				})
			})
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss">
	.arroright {
		width: 24rpx;
		height: 24rpx;
	}

	.fixed {
		width: 100%;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		position: fixed;
		bottom: 0%;

		.fixedbtn {
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 36rpx;
			margin-bottom: 84rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.orderdetial {
		width: 100%;
		overflow: hidden;

		.hxbtn {
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 24rpx;
			margin-bottom: 58rpx;
		}

		.fixed {
			width: 100%;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0%;

			.btn {
				width: 252rpx;
				height: 82rpx;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				border: 2rpx solid #86909C;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #86909C;
				margin-top: 24rpx;
				margin-left: 466rpx;
			}
		}

		.orderdetialback {
			position: absolute;
			z-index: -1;
			height: 500rpx;
			width: 100%;
		}

		.centerbox {
			width: 686rpx;
			margin: auto;
			margin-top: 232rpx;

			.zttext {
				width: 100%;
				overflow: hidden;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #1D2129;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #1D2129;
					margin-top: 14rpx;
				}
			}

			.ddxx {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				padding: 32rpx 0;

				.centerline {
					width: 630rpx;
					margin: auto;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #4E5969;
					}
				}
			}

			.jigemx {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 28rpx auto;
				overflow: hidden;

				.center {
					width: 630rpx;
					margin: auto;
					margin-top: 32rpx;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
						margin-bottom: 20rpx;
					}

					.line2 {
						width: 100%;
						overflow: hidden;
						margin-top: 26rpx;

						.textsbox {
							width: 630rpx;
							height: 146rpx;
							background: #F7F8FA;
							overflow: hidden;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							margin-bottom: 28rpx;

							textarea {
								font-size: 24rpx;
								height: 100rpx;
								margin-top: 28rpx;
								margin-left: 28rpx;
							}
						}

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							margin-bottom: 24rpx;
						}
					}

					.line1 {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							display: flex;
							align-items: center;
							margin-bottom: 24rpx;
						}


					}

					.bottomline {
						width: 100%;
						height: 102rpx;
						display: flex;
						align-items: center;
						border-top: 2rpx solid #F2F3F5;
						justify-content: space-between;

						.tt1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
						}

						.jiage1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #F53F3F;
						}
					}
				}
			}

			.spbox {
				width: 686rpx;
				height: 212rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				margin-top: 28rpx;
				display: flex;
				position: relative;
				align-items: center;

				.xz {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 30rpx;
					top: 30rpx;
				}

				.leftimg {
					width: 156rpx;
					height: 156rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-left: 28rpx;
				}

				.texts {
					width: 462rpx;
					margin-left: 12rpx;

					.t1 {
						width: 356rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* 限制文本显示为2行 */
						overflow: hidden;
					}

					.t2 {
						width: 356rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #7F7F7F;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* 限制文本显示为2行 */
						overflow: hidden;
						margin-top: 10rpx;
					}

					.t3line {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 22rpx;

						.box1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7F7F7F;
						}
					}
				}
			}

			.addressbox {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 42rpx;

				.addrestext {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #777777;
					width: 558rpx;
					height: 68rpx;
					margin-left: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 30rpx;
					margin-top: 24rpx;
				}

				.topline {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 28rpx;
					position: relative;

					.addressicon {
						margin-left: 28rpx;
						width: 32rpx;
						height: 32rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						margin-left: 16rpx;
					}

					.phone {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						margin-left: 24rpx;
					}

					.rightbtn {
						width: 112rpx;
						height: 48rpx;
						background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);





						border-radius: 24rpx 24rpx 24rpx 24rpx;
						text-align: center;
						line-height: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						position: absolute;
						right: 0;
						margin-right: 24rpx;
					}
				}
			}
		}
	}
</style>